<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <div>
        <!-- 操作按钮 -->
        <a-button-group>
            <a-button icon="plus" type="primary" @click="clickAddDepartmentButton"></a-button>
            <a-button icon="edit" type="primary"
                      :disabled="selectedKeys.length === 0 || selectedKeys[0] === '0'"
                      @click="clickEditDepartmentButton"
            ></a-button>
            <a-button icon="delete"
                      :disabled="selectedKeys.length === 0 || selectedKeys[0] === '0'"
                      @click="clickDeleteDepartmentButton"
            ></a-button>
        </a-button-group>
        <!-- 列表 -->
        <a-menu mode="inline" :selectedKeys="selectedKeys">
            <a-menu-item v-for="dept in dataList" :key="dept.id" @click="clickMenuItem(dept)">
                <a-icon v-if="dept.id === '0'" type="bars" />
                {{ dept['deptName'] }}
            </a-menu-item>
        </a-menu>
        <!-- 表单 -->
        <c-form-modal ref="deptFormModal">
            <template v-slot:formItem="">
                <a-form-item label="部门名称">
                    <a-input type="text" autocomplete="off" v-decorator="[ 'deptName' ]" />
                </a-form-item>
                <a-form-item label="排序值">
                    <a-input-number type="text" autocomplete="off" v-decorator="[ 'sort' ]" />
                </a-form-item>
            </template>
        </c-form-modal>
    </div>
</template>

<script>
    import { getDepartmentList,addDepartment,editDepartment,deleteDepartment } from '../../apis/upms';
    import CFormModal from '@/components/form/CFormModal';
    export default {
        components : { CFormModal },
        data(){
            return {
                /**
                 * 部门列表
                 */
                dataList : [],
                /**
                 * 选中的Key
                 */
                selectedKeys : [],
            };
        },
        created(){
            //  选中部门
            let deptId = this.$route.query['deptId'];
            this.selectedKeys.push(deptId ? deptId : '0');
            //  获取列表数据
            this.reloadDataList();
        },
        methods : {
            /**
             * 获取当前选中的部门
             */
            getSelectedDepartment : function(){
                for (let i = 0; i < this.dataList.length; i++){
                    let item = this.dataList[i];
                    if (item.id === this.selectedKeys[0]){
                        return item;
                    }
                }
            },
            /**
             * 点击删除部门按钮事件
             */
            clickDeleteDepartmentButton : function(e){
                e.preventDefault();
                let $this = this;
                //  获取当前选中的部门
                let data = $this.getSelectedDepartment();
                $this.$modal.confirm({
                    title : "删除部门",
                    content : "确认删除【" + data['deptName'] +"】",
                    onOk : () => {
                        deleteDepartment(data['id']).then(() => {
                            let index = $this.dataList.indexOf(data);
                            $this.dataList.splice(index,1);
                            $this.$message.success("删除成功");
                        });
                    }
                });
            },
            /**
             * 点击修改部门按钮事件
             */
            clickEditDepartmentButton : function(e){
                e.preventDefault();
                //  显示Modal
                this.$refs['deptFormModal'].open({
                    title : '添加部门',
                    apiInterface : editDepartment,
                    callbackFn : this.reloadDataList,
                    data : this.getSelectedDepartment()
                });
            },
            /**
             * 点击添加部门按钮事件
             */
            clickAddDepartmentButton : function(e){
                e.preventDefault();
                //  显示Modal
                this.$refs['deptFormModal'].open({
                    title : '添加部门',
                    apiInterface : addDepartment,
                    callbackFn : this.reloadDataList
                });
            },
            /**
             * 部门点击事件
             * @param item
             */
            clickMenuItem : function (item) {
                if (this.selectedKeys[0] !== item.id) {
                    this.selectedKeys.splice(0, 1);
                    this.selectedKeys.push(item.id);
                    const params = Object.assign({},this.$route.query,{ deptId : item.id });
                    this.$router.push({ name: this.$route.name, query: params }).then();
                }
            },
            /**
             * 重新加载数据
             */
            reloadDataList : function () {
                let $this = this;
                $this.dataList.splice(0,$this.dataList.length);
                getDepartmentList().then(res => {
                    res.data.unshift({ id : '0', deptName : '所有部门' });
                    $this.dataList = res.data;
                });
            }
        }
    }
</script>
